<template>
  <div class="header-bar" :class="{'fixed': fixed, 'white': theme == 'white' || menuMode != ''}">
    <div class="header-bar-main flex-between">
      <a href="index.html" title="返回首页" class="logo">
        <img oncontextmenu="return false" src="@/assets/images/logo_white.svg" v-if="theme == 'transparent' && menuMode == ''" class="logo-img" alt="logo">
        <img oncontextmenu="return false" src="@/assets/images/logo_black.svg" v-else class="logo-img" alt="logo">
      </a>
      <div class="navbar">
        <div class="navbar-container">
          <a href="index.html" class="nav-item" :class="{'active': active == 'home'}" @mouseover="menuMode = ''">首页</a>
          <a href="about.html" class="nav-item" :class="{'move': menuMode == 'about', 'active': active == 'about'}" @mouseover="menuMode = 'about'">探索安德</a>
          <a href="industry.html" class="nav-item" :class="{'move': menuMode == 'industry', 'active': active == 'industry'}" @mouseover="menuMode = 'industry'">安德产业</a>
          <a href="brand.html" class="nav-item" :class="{'active': active == 'brand'}" @mouseover="menuMode =''">品牌布局</a>
          <a href="technology.html" class="nav-item" :class="{'move': menuMode == 'technology', 'active': active == 'technology'}" @mouseover="menuMode = 'technology'">技术创新</a>
          <a href="manufacture.html" class="nav-item" :class="{'move': menuMode == 'manufacture', 'active': active == 'manufacture'}" @mouseover="menuMode = 'manufacture'">制造实力</a>
          <a href="business.html" class="nav-item" @mouseover="menuMode =''" :class="{'active': active == 'business'}">商业合作</a>
        </div> 
      </div>
      <div class="header-action" :class="{'white': theme == 'white' || menuMode != ''}">
        <div class="header-search">  
          <input type="text" class="header-input" placeholder="探索 Arda" v-model="keyword" @focus="showSearchPopup = true" @blur="hideSearchPopup" @keyup.enter="onSearch">
          <i class="iconfont icon-search hv-opacity" @click="onSearch"></i>
          <div class="search-dropmenu" :class="{ 'show': showSearchPopup === true }">
            <div class="sdrop-main">
              <div class="sdrop-label">大家都在搜</div>
              <div class="sdrop-news">
                <a :href="item.url || `search.html?keyword=${item.title}`" class="sd-news" v-for="(item, index) in keywordList" :key="index" >
                  <span class="label text-nowrap">{{ item.title }}</span>
                  <span class="tag" v-if="item.tag">{{ item.tag}}</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="action-item hv-opacity" :class="{'white': theme == 'white' || menuMode != ''}">
          <img src="@/assets/images/icon_global.svg" class="black">
          <img src="@/assets/images/icon_global_white.svg" class="white">
        </div>
      </div>
    </div>
    <div class="hd-mask" :class="{'show': menuMode !== ''}" @mouseover="menuMode = ''"></div>

    <!-- 探索安德弹窗 -->
    <div class="hd-drop" :class="{'show': menuMode == 'about'}">
      <div class="hd-drop-main">
        <div class="hd-height"></div>
        <div class="hdp-about">
          <div class="hdp-menu-line">
            <div class="hdp-menu-nav">
              关于Arda
            </div>
            <div class="sub-nav">
              <a :href="item.url || 'javascript:;'" class="nav" v-for="(item, index) in nav1" :key="index">{{ item.title }}</a>
            </div>
          </div>
          <div class="hdp-menu-line">
            <div class="hdp-menu-nav">
              新闻资讯
            </div>
            <div class="sub-nav">
              <a :href="item.url || 'javascript:;'" class="nav" v-for="(item, index) in nav2" :key="index">{{ item.title }}</a>
            </div>
          </div>
          <div class="hdp-about-swiper">
            <div class="hd-about-swiper swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in nav3" :key="index">
                  <a :href="item.url || 'javascript:;'" class="hd-about-banner">
                    <img oncontextmenu="return false" :src="item.photo" class="fit-img">
                  </a>
                </div>
              </div>
            </div>
            <div class="hd-swiper-dots">
              <div class="dot" :class="{'active': aboutSwiperCurrent == index}" v-for="(item, index) in nav3" :key="index"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 安德产业弹窗 -->
    <div class="hd-drop" :class="{'show': menuMode == 'industry'}">
      <div class="hd-drop-main">
        <div class="hd-height"></div>
        <div class="hdp-normal">
          <div class="hd-ind-tabs flex-center">
            <div class="tab-item hv-opacity" :class="{'active': industryType == 1}" @click="industryType = 1">电器产业</div>
            <div class="tab-item hv-opacity" :class="{'active': industryType == 2}" @click="industryType = 2">智能产业</div>
          </div>
          <div class="hd-ind-box flex-center" v-if="industryType == 1">
            <a :href="item.url || 'javascript:;'" class="hd-ind-item hv-scale" v-for="(item, index) in nav4" :key="index">
              <div class="photo">
                <img oncontextmenu="return false" :src="item.photo" class="fit-img">
              </div>
              <div class="ind-title">{{ item.title }}</div>
            </a>
          </div>
          <div class="hd-ind-box flex-center" v-if="industryType == 2">
            <a :href="item.url || 'javascript:;'" class="hd-ind-item hv-scale" v-for="(item, index) in nav5" :key="index">
              <div class="photo">
                <img oncontextmenu="return false" :src="item.photo" class="fit-img">
              </div>
              <div class="ind-title">{{ item.title }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术创新弹窗 -->
    <div class="hd-drop" :class="{'show': menuMode == 'technology'}">
      <div class="hd-drop-main">
        <div class="hd-height"></div>
        <div class="hdp-normal">
          <div class="hd-tech-box flex-center">
            <a :href="item.url || 'javascript:;'" class="hd-tech-item hv-scale" v-for="(item, index) in nav6" :key="index">
              <div class="photo">
                <img oncontextmenu="return false" :src="item.photo" class="fit-img">
              </div>
              <div class="tech-title">{{ item.title }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 制造实力弹窗 -->
    <div class="hd-drop" :class="{'show': menuMode == 'manufacture'}">
      <div class="hd-drop-main">
        <div class="hd-height"></div>
        <div class="hdp-normal">
          <div class="hd-manu-box flex-center">
            <a :href="item.url || 'javascript:;'" class="hd-manu-item hv-scale" v-for="(item, index) in nav7" :key="index">
              <div class="photo">
                <img oncontextmenu="return false" :src="item.photo" class="fit-img">
              </div>
              <div class="manu-title">{{ item.title }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="header-placeholder" v-if="placeholder"></div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import Swiper from 'swiper'
  import { Autoplay } from 'swiper/modules'
  import 'swiper/scss';
  import { getDownDropList, getSearchKeyList } from '@/api/common'

  const props = defineProps({
    theme: { // 主题颜色，默认为白色
      type: String,
      default: 'transparent'
    },
    fixed: { // 是否固定在顶部，默认为true
      type: Boolean,
      default: true
    },
    placeholder: {
      type: Boolean,
      default: false
    },
    active: {
      type: String,
    }
  });
  const showSearchPopup = ref(false);
  const menuMode = ref('');
  let aboutSwiper = null;
  const aboutSwiperCurrent = ref(0);
  const industryType = ref(1)
  const nav1 = ref([])
  const nav2 = ref([])
  const nav3 = ref([])
  const nav4 = ref([])
  const nav5 = ref([])
  const nav6 = ref([])
  const nav7 = ref([])
  const keywordList = ref([])
  const keyword = ref('')

  onMounted(() => {
    loadData()
  });

  const loadData = () => {
    getDownDropList({cate: 1}).then(res => {
      nav1.value = res.data
    })
    getDownDropList({cate: 2}).then(res => {
      nav2.value = res.data
    })
    getDownDropList({cate: 3}).then(res => {
      nav3.value = res.data
      setTimeout(() => {
        loadAboutSwiper();
      }, 200)
    })
    getDownDropList({cate: 4}).then(res => {
      nav4.value = res.data
    })
    getDownDropList({cate: 5}).then(res => {
      nav5.value = res.data
    })
    getDownDropList({cate: 6}).then(res => {
      nav6.value = res.data
    })
    getDownDropList({cate: 7}).then(res => {
      nav7.value = res.data
    })
    getSearchKeyList().then(res => {
      keywordList.value = res.data
    })
  }

  const hideSearchPopup = () => {
    setTimeout(() => {
      showSearchPopup.value = false
    }, 200)
  }

  const loadAboutSwiper = () => {
    if (aboutSwiper) {
      aboutSwiper.destroy();
    }
    aboutSwiper = new Swiper('.hd-about-swiper', {
      modules: [Autoplay],
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      on: {
        slideChangeTransitionEnd: (swiper) => {
          aboutSwiperCurrent.value = swiper.realIndex;
        }
      }
    });
  };

  const onSearch = () => {
    if (keyword.value) {
      window.location.href = `/search.html?keyword=${keyword.value}`
    }
  };
</script>

<style lang="scss">
.header-placeholder {
  height: 4.375rem /* 70/16 */;
}
  .header-bar {
    width: 100%;
    height: 4.375rem /* 70/16 */;
    padding: 0 5rem /* 80/16 */;
    position: relative;
    transition: background .2s ease-in-out;
    z-index: 80;
    background: transparent;
    .logo {
      width: 12.875rem /* 206/16 */;
      img {
        width: 100%;
      }
    }
    &.fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 80;
    }
    &.white {
      background: #FFFFFF;
      .navbar-container {
        .nav-item {
          color: #000000;
        }
      }
    }
  }
  .header-bar-main {
    display: flex;
    align-items: center;
    height: 4.375rem /* 70/16 */;
    position: relative;
    z-index: 20;
  }
  .navbar {
    position: relative;
  }
  .navbar-container {
    display: flex;
    align-items: center;
    .nav-item {
      height: 4.375rem /* 70/16 */;
      display: flex;
      align-items: center;
      font-size: .9375rem /* 15/16 */;
      color: #fff;
      padding: 0 .9375rem /* 15/16 */;
      position: relative;
      cursor: pointer;
      &::after {
        content: '';
        visibility: hidden;
        display: block;
        width: calc(100% - 1.875rem /* 30/16 */);
        left: 50%;
        height: 2px;
        transform: translateX(-50%);
        background: #F80013;
        position: absolute;
        bottom: 0;
      }
      &+.nav-item {
        margin-left: .75rem /* 12/16 */;
      }
      &:hover {
        color: #F80013;
        font-weight: 500;
        &::after {
          visibility: visible;
        }
      }
      &.active {
        &::after {
          
          visibility: visible;
        }
      }
    }
  }
  .header-action {
    display: flex;
    align-items: center;
    &.white {
      .header-search {
        background: #F6F6F6;
        .header-input {
          color: #000000;
          &::placeholder {
            color: #888888
          }
        }
        .icon-search {
          color: #000000;
        }
      }
    }
    .header-search {
      position: relative;
      width: 12.5rem /* 200/16 */;
      height: 2.125rem /* 34/16 */;
      padding: 0 .9375rem /* 15/16 */;
      background: rgba(255,255,255,.2);
      border-radius: 1.125rem /* 18/16 */;
      display: flex;
      align-items: center;
      backdrop-filter: blur(3.75rem /* 60/16 */);
      .header-input {
        background: transparent;
        flex: 1;
        width: 0;
        height: 100%;
        border: none;
        outline: none;
        color: #fff;
        &::placeholder {
          color: rgba(255,255,255,.75)
        }
      }
      .icon-search {
        font-size: 1rem /* 16/16 */;
        color: #fff;
      }
    }
    .action-item {
      margin-left: 1.875rem /* 30/16 */;
      width: 1.375rem /* 22/16 */;
      height: 1.375rem /* 22/16 */;
      position: relative;
      &::before {
        content: '';
        display: block;
        width: 1px;
        height: 1.125rem /* 18/16 */;
        background: #FFFFFF;
        position: absolute;
        left: - .9375rem /* 15/16 */;
        top: 50%;
        transform: translateY(-50%);
      }
      &.white {
        &::before {
          background: #D3D3D3;
        }
        img.white {
          opacity: 0;
        }
        img.black {
          opacity: 1;
        }
      }
      img {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 0;
        left: 0;
        &.white {
          opacity: 1;
        }
        &.black {
          opacity: 0;
        }
      }
    }
  }
  .search-dropmenu {
    position: absolute;
    top: 3.3125rem /* 53/16 */;
    left: 0;
    width: 13.4375rem /* 215/16 */;
    visibility: hidden;
    &.show {
      visibility: visible;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 1.875rem /* 30/16 */;
      bottom: 1.6875rem /* 27/16 */;
      width: 9.625rem /* 154/16 */;
      height: 6.625rem /* 106/16 */;
      border-radius: .375rem /* 6/16 */;
      opacity: 1;
      background: rgba(0, 0, 0, .15);
      filter: blur(6.25rem /* 100/16 */);
      z-index: 1;
    }
  }
  .sdrop-main {
    padding: 1.5625rem /* 25/16 */ 1rem /* 16/16 */;
    width: 100%;
    height: 100%;
    border-radius: .375rem /* 6/16 */;
    background: #FFFFFF;
    position: relative;
    z-index: 3;
    .sdrop-label {
      font-size: 12px;
      line-height: 1;
      color: #595757;
    }
    .sdrop-news {
      margin-top: 1.375rem /* 22/16 */;
    }
    .sd-news {
      width: 100%;
      display: flex;
      align-items: center;
      &:hover {
        .label {
          font-weight: 500;
          color: #000000
        }
      }
      &+.sd-news {
        margin-top: 1.25rem /* 20/16 */;
      }
      .label {
        flex: 1;
        width: 0;
        font-size: .8125rem /* 13/16 */;
        line-height: .875rem /* 14/16 */;
        color: #333333;
      }
      .tag {
        padding: .1875rem /* 3/16 */;
        background: #FC5821;
        border-radius: .125rem /* 2/16 */;
        margin-left: .5rem /* 8/16 */;
        font-size: .6875rem /* 11/16 */;
        line-height: .75rem /* 12/16 */;
        color: #FFFFFF;
      }
    }
  }
  .hd-drop {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    opacity: 0;
    overflow: hidden;
    height: 0;
    z-index: 10;
    &.show {
      animation: hdSlideDown .2s linear both;
    }
    .hd-height {
      height: 4.375rem /* 70/16 */;
    }
    .hdp-about {
      margin: 0 5rem /* 80/16 */;
      padding: 3.125rem /* 50/16 */ 0 4.375rem /* 70/16 */;
      display: flex;
      justify-content: center;
    }
    .hdp-normal {
      margin: 0 5rem /* 80/16 */;
      padding: 3.125rem /* 50/16 */ 0 4.375rem /* 70/16 */;
    }
  }
  .hd-mask {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.6);
    opacity: 0;
    overflow: hidden;
    height: 100vh;
    z-index: 1;
    transition: all .3s ease-in-out;
    &.show {
      height: 100vh;
      opacity: 1;
      visibility: visible;
    }
  }
  .hdp-menu-line {
    width: 12.8125rem /* 205/16 */;
    box-sizing: content-box;
    padding-top: .625rem /* 10/16 */;
    &:first-child {
      padding-right: 3.125rem /* 50/16 */;
    }
    .sub-nav {
      margin-top: 1.875rem /* 30/16 */;
      .nav {
        display: block;
        font-size: .875rem /* 14/16 */;
        line-height: 1;
        color: #595757;
        transition: all .2s ease-in-out;
        &+.nav {
          margin-top: 1.5625rem /* 25/16 */;
        }
        &:hover {
          font-weight: 500;
          color: #E50012;
        }
      }
    }
  }
  .hdp-menu-nav {
    padding-bottom: 1.5rem /* 24/16 */;
    font-size: .9375rem /* 15/16 */;
    font-weight: 500;
    color: #000000;
    border-bottom: 1px dashed #E1E1E1;
  }
  .hdp-about-swiper {
    width: 22.1875rem /* 355/16 */;
    overflow: hidden;
    .hd-about-banner {
      display: block;
      width: 22.1875rem /* 355/16 */;
      height: 14.0625rem /* 225/16 */;
      border-radius: 2px;
      overflow: hidden;
      img {
        border-radius: 2px;
      }
    }
  }
  .hd-swiper-dots {
    margin-top: 1.375rem /* 22/16 */;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .dot {
      width: 1rem /* 16/16 */;
      height: .125rem /* 2/16 */;
      background: #D3D3D3;
      margin: 0 .125rem /* 2/16 */;
      &.active {
        background: #E50012;
      }
    }
  }
  // 安德产业
  .hd-ind-tabs {
    .tab-item {
      margin: 0 1.375rem /* 22/16 */;
      font-size: 1rem /* 16/16 */;
      line-height: 1;
      color: #595757;
      &.active {
        color: #000000;
        font-weight: 500;
      }
    }
  }
  .hd-ind-box {
    margin-top: 2.1875rem /* 35/16 */;
    
  }
  .hd-ind-item {
    width: 13.125rem /* 210/16 */;
    margin: 0 .75rem /* 12/16 */;
    .photo {
      width: 13.125rem /* 210/16 */;
      height: 14.0625rem /* 225/16 */;
      border-radius: 2px;
      img {
        border-radius: 2px;
      }
    }
    .ind-title {
      margin-top: 1.25rem /* 20/16 */;
      text-align: center;
      white-space: nowrap;
      font-size: .875rem /* 14/16 */;
      line-height: 1;
      color: #000000;
    }
  }
  .hd-tech-item {
    width: 17.1875rem /* 275/16 */;
    margin: 0 .75rem /* 12/16 */;
    .photo {
      width: 17.1875rem /* 275/16 */;
      height: 10.625rem /* 170/16 */;
      border-radius: 2px;
      img {
        border-radius: 2px;
      }
    }
    .tech-title {
      margin-top: 1.25rem /* 20/16 */;
      font-size: .875rem /* 14/16 */;
      line-height: 1;
      color: #000000;
      text-align: center;
      white-space: nowrap;
    }
  }
  .hd-manu-item {
    width: 13.125rem /* 210/16 */;
    margin: 0 .75rem /* 12/16 */;
    .photo {
      width: 13.125rem /* 210/16 */;
      height: 14.0625rem /* 225/16 */;
      border-radius: 2px;
      img {
        border-radius: 2px;
      }
    }
    .manu-title {
      margin-top: 1.25rem /* 20/16 */;
      font-size: .875rem /* 14/16 */;
      line-height: 1;
      color: #000000;
      text-align: center;
      white-space: nowrap;
    }
  }
  @keyframes hdSlideDown {
    0% {
      height: 0;
      opacity: 0;
      visibility: hidden;
    }
    100% {
      height: auto;
      opacity: 1;
      visibility: visible;
    }
  }
</style>